<%--
  Created by IntelliJ IDEA.
  User: zer
  Date: 2019/9/17
  Time: 18:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=0.58,maximum-scale=1.0, user-scalable=no">
    <title>智慧云打印移动端</title>

    <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/style.css"/>

    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>


    <script type="text/javascript" src="js/popper.js"></script>
    <script type="text/javascript" src="js/bootbox.js"></script>
    <script type="text/javascript" src="js/bootbox.locales.js"></script>


</head>
<body>
<div style="background: url(img/背景.png);">
<div class="container">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="header">
            <img src="img/logo.png" style="margin-top: -40px;"/>
        </div>
    </div>
    <div id="content">
        <div class="row banxin2" >
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <form method="post" action="${pageContext.request.contextPath}/chooseAction_into" id="take" style="text-align: right;">
                	<a href="javascript:void(0);">
        						<img src="img/back.png" style="width: 20px; height: 15px;"/>
                	返回上一步</a><br />
                	<div style="text-align: center;">
                		<label>手机号码:</label><input type="text" id="phoneNum" name="phone_num"><br/>
                    <label id="extractLabel">提取号码:</label><input type="text" id="extractCode" name="extract_code"><br/>
                	</div>
                    
                    <a id="showExtractCode" hidden="hidden" href="javascript:void(0);"
                       onclick="showExtractCode()">已有提取码</a>
                    <a id="hiddenExtractCode" href="javascript:void(0);" onclick="hiddenExtractCode()">没有提取码?</a>
                </form>
                <input type="button" onclick="next()" class="a-btn" value="下一步" style="margin-left: 205px;" >
            </div>
        </div>
    </div>
    <div class="row banxin2">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div id='insign'>
                <label id="tip" class="text-explain">欢迎使用智慧云打印</label>
                <br/>
                <label class="text-explain">
                    请输入您的手机号码
                </label>
            </div>
        </div>
    </div>
</div>
</div>
</body>
<%--安卓端抑制小键盘拉起时页面错乱--%>
<script>
    var winHeight = $(window).height(); //获取当前页面高度
    $(window).resize(function () {
        //当窗体大小变化时
        var thisHeight = $(this).height();  //窗体变化后的高度
        if (winHeight - thisHeight > 50) {
            /*
            软键盘弹出
            50是设置的阈值，用来排除其他影响窗体大小变化的因素，比如有的浏览器的工具栏的显示和隐藏
            */
            $('body').css('height', winHeight + 'px');
        } else {
            /*
            软键盘关闭
            */
            $('body').css('height', '100%');
        }
    });

</script>
<script>

    function next() {
        var extractCode = $('#extractCode').val();
        var state = $('#extractCode').prop("hidden")
        if (!state && extractCode == "") {
            //没有隐藏提取码项
            bootbox.alert("提取码不能为空!");
        }else{
            var phoneNum = $('#phoneNum').val();
            var length = phoneNum.length;
            var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            var tel = /^(\d{3,4}-?)?\d{7,9}$/;
            if (tel.test(phoneNum) || (length == 11 && mobile.test(phoneNum))) {
                //号码正确
                $("#take").submit();
            } else {
                //号码错误
                bootbox.alert("联系方式不正确!");
            }
        }
    };

    function hiddenExtractCode() {
        $("#extractLabel").attr("hidden", "hidden");
        $("#extractCode").attr("hidden", "hidden");
        $("#hiddenExtractCode").attr("hidden", "hidden");
        $("#showExtractCode").removeAttr("hidden");
    };

    function showExtractCode() {
        $("#extractLabel").removeAttr("hidden", "hidden");
        $("#extractCode").removeAttr("hidden", "hidden");
        $("#hiddenExtractCode").removeAttr("hidden", "hidden");
        $("#showExtractCode").attr("hidden", "hidden");
    };

</script>
<script>
    $(function () {
        if (${notExtract != null})
            bootbox.alert({message: "${notExtract}", size: "small"});
    });
</script>
</html>
